{% extends "base.html" %}
{% block main %}
<div class="container">
  <div class="columns is-mobile is-vcentered my-0 mx-0">
    <div class="column is-9">
      <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
        <ul>
          <li>
            <a href="/" class="has-text-info">
              <span class="icon is-small">
                <i class="fas fa-home" aria-hidden="true"></i>
              </span>
              <span>主页</span>
            </a>
          </li>
          <li class="is-active">
            <a href="/notes">
              <span class="icon is-small has-text-link">
                <i class="far fa-sticky-note" aria-hidden="true"></i>
              </span>
              <span>云笔记</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="column is-3">
      <div class="is-pulled-right">
        <a class="button is-primary" href="/notes/add">
          <span class="icon is-small">
            <i class="far fa-plus-square"></i>
          </span>
          <span>新笔记</span>
        </a>
      </div>
    </div>
  </div>
  <div class="columns is-multiline my-0 mx-0">
    {% for note in notes %}
    <div class="column is-3 is-narrow">
      <div class="card">
        <header class="card-header">
          <p class="card-header-title is-centered">{{ note.title }}</p>
        </header>
        <div class="card-content">
          <div class="content">
            <p class="cp">{{ note.content }}</p>
          </div>
        </div>
        <footer class="card-footer">
          <span class="card-footer-item has-text-left">
            <time class="datetime">{{ note.upload_time }}</time>
          </span>
        </footer>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block js %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    setLocalTime();
  });
</script>
{% endblock %}